<template lang="jade">
#goto
    .pagetop(style="background-image: url(./static/gotokejiantop.jpg)")
        h1 {{ pagetitle }}
    #conbox
        .jianjie
            h1 公司简介
            h2 ABOUT US
            p.one.ani-view.fade-in-left {{ showlang ? jianjiecn : jianjieen }}
                el-button(type="text",@click="showlang = !showlang",style="padding: 0;") 中文/English
            .topimgbox
                img(src="../../static/jianjietopmin.jpg",style="width: 100%")
            //- .titlestyle
                .colorbox
        .zaifenge
            i.el-icon-arrow-down
        el-row.fazhan
            el-col(:span='3')
                img(src='../../static/lc_l.png',style="width: 100%")
            el-col.fazhancon(:span='18')
                h1.ani-view.fade-in-up 发展历程
                h2.ani-view.fade-in-box DEVELOPMENT
                .hrstyle.ani-view.fade-in-down
                div
                  div.fishBoneDiv
            el-col(:span='3')
                img(src='../../static/lc_r.png',style="width: 100%")
        .wenhua
            h1.ani-view.fade-in-box 企业文化
            h2.ani-view.fade-in-box CULTURE
            h1.ani-view.fade-in-box(style="margin-bottom:20px;") 我们只专注一件事情——通过创新科技为客户提供最佳解决方案
            h3.ani-view.fade-in-right 我们致力于通过不断的技术创新，为客户提供最前沿的解决方案，推动行业进步
            h3.ani-view.fade-in-right 客户的需求是我们工作的核心，我们始终以客户满意为目标，提供优质的服务和支持
            h3.ani-view.fade-in-right 诚信是我们的立业之本，我们坚持诚实守信，建立长期的合作关系
            h3.ani-view.fade-in-right 我们相信团队的力量，鼓励协作与分享，共同实现企业目标
            h3.ani-view.fade-in-right 我们重视员工的成长与发展，提供持续的学习和培训机会，提升专业技能和综合素质
        .rongyu
            el-dialog(:title="dialogTitle",width="50%",style="",:visible.sync="dialogVisible")
                img(v-bind:src="dialogUrl",style="width:80%")
            h1.ani-view.fade-in-up 公司荣誉
            h2.ani-view.fade-in-down HONOR
            el-row.ani-view.fade-in-up(:gutter="20",style="width: 80%;margin: 0 auto;")
                el-col(v-for="item in honorimgs",:key="item.id",:span="8")
                    img(v-bind:src="imgserver + item.img",style="width:100%;margin-bottom: 20px;",@click="dialogVisible = true;dialogUrl = imgserver + item.img;dialogTitle= item.title")
            h2(style="margin: 0;font-size: 16px;") 点击查看大图
        .tuandui
            h1.ani-view.fade-in-up 团队风采
            h2.ani-view.fade-in-down TEAM
            el-carousel(:interval="2000",type="card",height="400px")
                el-carousel-item(v-for="item in fencaiimgs",:key="item.id")
                    img(v-bind:src="imgserver + item.img",style="width:100%")
        .hezuo
            h1.ani-view.fade-in-up 合作伙伴
            h2.ani-view.fade-in-down RARTNERS
            el-row.ani-view.fade-in-up(:gutter="60")
                el-col(:span='4',v-for="item in enterprises",:key="item.id")
                    img(:src="imgserver + item.img",style="width:100%;border: solid 1px #c2daeb;")
                    p(style="margin: 0;") {{ item.title }}
</template>
<script>
import '../../static/js/jquery-1.8.3.min'
import '../../static/js/fishBone'
import '../../static/js/jquery.SuperSlide.2.1.1'
import axios from "../utils/http";
export default {
    data () {
        return {
            showlang: true,
            jianjiecn: '',
            jianjieen: '',
            dialogVisible: false,
            dialogUrl: '',
            dialogTitle: '',
            pagetitle: '',
            fencaiimgs: [],
            honorimgs: [],
            enterprises: [{
                img: '',
                title: ''
            }, {
                img: '',
                title: ''
            }, {
                img: '',
                title: ''
            }, {
                img: '',
                title: ''
            }, {
                img: '',
                title: ''
            }, {
                img: '',
                title: ''
            }, {
                img: '',
                title: ''
            }, {
                img: '',
                title: ''
            }, {
                img: '',
                title: ''
            }]
        };
    },
    mounted: function () {
        this.getdataall();
    },
    methods: {
        getdataall () {
            axios.all([
                axios
                    .get("/mcx/team/list"),
                axios
                    .get("/mcx/honor/list"),
                axios
                    .get("/mcx/course/list"),
                axios
                    .get("/mcx/enterprise/list"),
                axios
                    .get("/mcx/webConfig/getInfo", {
                        params: {
                            titles: "about_title,company_profile_zh,company_profile_en"
                        }
                    })
            ])
                .then(axios.spread((a, b, c, e, d) => {
                    this.fencaiimgs = a.data.data;
                    this.honorimgs = b.data.data;
                    $(".fishBoneDiv").fishBone(c.data.data);
                    this.enterprises = e.data.data;
                    this.pagetitle = d.data.data.about_title;
                    this.jianjiecn = d.data.data.company_profile_zh;
                    this.jianjieen = d.data.data.company_profile_en;


                    for (let i = this.enterprises.length; i < 9; i++) {
                        this.enterprises.push({
                            img: '',
                            title: ''
                        })
                    }
                }))
        }
    }
};
</script>

<style scoped>
@import "../../static/css/fishBone.css";
#goto {
  background-color: rgb(20, 103, 159);
}
#conbox {
  width: 85%;
  margin: 0 auto;
  background: #fff url(../../static/waitanbg.png) no-repeat bottom center;
}
.jianjie {
  position: relative;
  padding-top: 80px;
  z-index: 10;
}
.jianjie h1,
.jianjie h2,
.jianjie p {
  width: 50%;
  padding: 0 2%;
  font-weight: 400;
}
.jianjie h2 {
  margin-bottom: 20px;
  margin-top: 0;
}
.jianjie h1,
.jianjie h2 {
  margin-left: 6%;
  color: #e13834;
  font-family: "宋体";
}
.jianjie p.one {
  /* margin-top: 4%; */
  margin-left: 2%;
  color: #14679f;
  font-weight: 400;
  font-size: 14px;
  line-height: 30px;
  text-indent: 25px;
}
.topimgbox {
  width: 400px;
  height: 310px;
  padding: 20px;
  border: solid rgb(29, 66, 185) 2px;
  position: absolute;
  top: 20%;
  left: 59%;
  background: #fff;
  animation: imgboxkey 4s infinite;
  border-radius: 10px;
}
.topimgbox img {
  animation: imgbo 4s infinite;
  border-radius: 10px;
}
@keyframes imgbo {
  0% {
    transform: scale(1);
    box-shadow: 0px 0px 0px 0px #ababab;
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0px 0px 10px 5px #ababab;
  }
  100% {
    transform: scale(1);
    box-shadow: 0px 0px 0px 0px #ababab;
  }
}
@keyframes imgboxkey {
  0% {
    border: solid rgb(29, 66, 185) 2px;
  }
  40% {
    border: solid rgb(255, 255, 255) 2px;
  }
  60% {
    border: solid rgb(255, 255, 255) 2px;
  }
  100% {
    border: solid rgb(29, 66, 185) 2px;
  }
}
.titlestyle {
  width: 130px;
  height: 80px;
  border: solid 2px rgba(107, 107, 107, 0.5);
  position: absolute;
  top: 21%;
  left: 27%;
}
.colorbox {
  width: 100%;
  height: 300px;
  background: rgb(26, 114, 185);
  position: absolute;
  top: 880px;
  z-index: 0;
}
.fazhan {
  padding-top: 12%;
  padding-bottom: 5%;
}
.fazhancon {
  text-align: center;
}
.fazhancon h1 {
  color: #3c6088;
  font-weight: 400;
}
.fazhancon h2 {
  color: #3c6088;
  font-weight: 400;
  margin: 20px 0;
}
.hrstyle {
  border-bottom: #3c6088 1px solid;
  height: 1px;
  width: 20%;
  margin: 0 auto;
}
.lichengtext .el-col p {
  padding: 10px;
  /* border: 1px #808080 solid; */
  /* border-radius: 5px; */
  background-color: #15669e;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  transition: 0.6s;
}
.lichengtext .el-col p:hover {
  background-color: #e13834;
}
.fenge {
  height: 1px;
  width: 80%;
  border-bottom: #3c6088 2px solid;
  margin: 0 auto;
  position: relative;
}
.fenge span {
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  border: #3c6088 2px solid;
  top: -5px;
}
.fenge span:nth-of-type(1) {
  left: 9%;
}
.fenge span:nth-of-type(2) {
  left: 17%;
}
.fenge span:nth-of-type(3) {
  left: 36%;
}
.fenge span:nth-of-type(4) {
  left: 63%;
}
.fenge span:nth-of-type(5) {
  left: 81%;
}
.fenge span:nth-of-type(6) {
  left: 89%;
}
.zaifenge {
  border-top: #3c6088 2px solid;
  margin-top: 40px;
  height: 10px;
  position: relative;
}
.zaifenge i {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  line-height: 23px;
  font-weight: 600;
  border: #3c6088 2px solid;
  border-radius: 50%;
  background: rgb(238, 245, 251);
  left: 49%;
  color: #3c6088;
  font-size: 20px;
  top: -14px;
}
.jiegou {
  text-align: center;
  padding: 10%;
}
.jiegou h1,
.jiegou h2 {
  color: #3c6088;
  font-weight: 400;
}
.wenhua {
  background-color: rgb(194, 218, 235);
  padding: 5% 10%;
}
.wenhua h1,
.wenhua h2 {
  color: #3c6088;
  font-size: 26px;
  margin: 5px 0;
}
.wenhua h3 {
  font-weight: 400;
  line-height: 36px;
  font-size: 18px;
}
.rongyu {
  text-align: center;
  padding-bottom: 20px;
  padding: 5%;
}
.rongyu h1,
.rongyu h2 {
  color: #3c6088;
  font-weight: 400;
}
.rongyu h2 {
  margin-bottom: 20px;
}

.tuandui {
  padding: 5% 10%;
}
.tuandui h1,
.tuandui h2 {
  color: #3c6088;
  text-align: center;
  font-weight: 400;
}
.tuandui h2 {
  margin-bottom: 20px;
}
.hezuo {
  padding: 10%;
  padding-top: 0px;
}
.hezuo h1,
.hezuo h2 {
  color: #3c6088;
  text-align: center;
  font-weight: 400;
}
.hezuo h2 {
  margin-bottom: 20px;
}
.hezuo .el-row .el-col {
  padding: 1%;
}
.hezuo .el-row .el-col {
  text-align: center;
  font-size: 16px;
  line-height: 40px;
}
</style>
